<script setup>
import { ref, watch, computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import ImageWithMarks from "../../components/ImageWithMarksCopy.vue";
import { useRoute } from "vue-router";
import { useControl } from "@/utils/useControl";

const store = useCounterStore();
const { lineColor, cropExpandSize, lineWidth, lineStyle, idsList } =
  storeToRefs(store);
const { images, selectedIndex, item, select } = useControl();

const route = useRoute();
onMounted(() => {
  item.value = JSON.parse(route.query.items);
  item.value.displaySize = {
    width: 1000,
    height: 430,
  };
  const index = images.value.findIndex((i) => i.id === item.value.id);
  selectedIndex.value = parseInt(index);
  currentPage.value = selectedIndex.value / 5;
});

// 分页参数
const itemsPerPage = 5;
const currentPage = ref(0);

// 计算当前可见的数据项
const visibleItems = computed(() => {
  const start = currentPage.value * itemsPerPage;
  const end = start < 1 ? 0 : start + itemsPerPage;
  let nowList = images.value.slice(start < 1 ? 0 : start, end < 5 ? 5 : end);
  let idList = [];
  nowList.forEach((i) => {
    idList.push(i.id);
    if (!idsList.value.includes(i.id)) {
      idsList.value.push(i.id);
    }
  });
  images.value.forEach((i) => {
    if (idList.includes(i.id) && !i.status) {
      i.url = "http://127.0.0.1:49999?filePath=" + i.filePath;
    }
  });

  return images.value.slice(start < 1 ? 0 : start, end < 5 ? 5 : end);
});

// 是否显示已经是第一页的消息
const showFirstPageMessage = ref(false);
// 监听选择索引变化以调整页面
watch(
  selectedIndex,
  (newIndex) => {
    // 判断是否需要翻页
    if (newIndex >= (currentPage.value + 1) * itemsPerPage) {
      currentPage.value++;
    } else if (newIndex < currentPage.value * itemsPerPage) {
      currentPage.value--;
    }
    // 防止选择超出范围
    if (newIndex >= images.value.length) {
      selectedIndex.value = images.value.length - 1;
    } else if (newIndex < 0) {
      selectedIndex.value = 0;
      showFirstPageMessage.value = true;
      setTimeout(() => {
        showFirstPageMessage.value = false;
      }, 2000); // 2秒后隐藏消息
    }
  },
  {
    immediate: true,
  }
);
// watch(visibleItems, () => {
//   changePage();
// });
const changePage = () => {
  currentPage.value = 0;
  item.value = JSON.parse(JSON.stringify(visibleItems.value[0]));
  item.value.displaySize = {
    width: 1000,
    height: 430,
  };
};
defineExpose({
  changePage,
});
</script>

<template>
  <div class="content">
    <ImageWithMarks
      :imageUrl="item.url"
      :marks="item.marks"
      :lineWidth="lineWidth"
      :displaySize="item.displaySize"
      :borderColor="lineColor"
      :cropExpandSize="cropExpandSize"
      :lineStyle="lineStyle"
    ></ImageWithMarks>
    <div
      style="width: 1100px; height: 10px; background-color: red"
      :style="{
        backgroundColor: item.borderColor,
      }"
    ></div>
  </div>
  <div class="pagination">
    <div
      v-for="(items, index) in visibleItems"
      class="item"
      :class="items.id == item.id ? 'selected' : ''"
      @click="select(items, index + currentPage * itemsPerPage)"
    >
      <div class="flex-center" style="width: 100%">
        <el-button size="small">{{ items.level }}</el-button>
      </div>
      <ImageWithMarks
        ref="canvas"
        :imageUrl="items.url"
        :marks="items.marks"
        :lineWidth="lineWidth"
        :displaySize="items.displaySize"
        :borderColor="lineColor"
        :cropExpandSize="cropExpandSize"
        :lineStyle="lineStyle"
      ></ImageWithMarks>

      <div
        style="width: 245px; height: 10px; background-color: red"
        :style="{
          backgroundColor: items.borderColor,
        }"
      ></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 510px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #3b3b39;
  margin-top: 5px;
}

.pagination {
  margin-top: 5px;
  width: 100%;
  display: flex;

  .item {
    width: 314px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 5px;
    background-color: #3b3b39;
  }
  .selected {
    background: #777777;
  }
}
</style>
